見本テンプレートHTMLタグ

楽天のHTMLテンプレート集のシンプルの｢商品イメージをたくさん見せたい時用｣を色分けしてみました。
解り易いように改行したり、改行を削除したりしてありますがHTMLソースと同じ物です。
<　>～</　>で一組ですが中に入り込んでいる場合がありますので色と<　>～</　>で理解して下さい。
部分的に変えたいときはホームページ作成メモを参考にして下さい。
横の余白が必要ない時は、80％を100％にするといいです。

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">

<table width="80%" border="0" cellspacing="0" cellpadding="4" bgcolor="#ccccff">　　　※タイトル枠
<tr>
<tr>
<td>

<table width="100%" border="0" 　cellspacing="0" cellpadding="8" bgcolor="#ffffff">　　　※タイトル枠内　　
<td align="left">
<b>
<font color="#3366CC">■■■
</font>
</b>
</td>

<td align="center" nowrap>
<b>
<font color="#000066">
★★★ ここにタイトルを入れる ★★★
</font>
</b>
</td>

<td align="right">
<b>
<font color="#3366CC">■■■
</font>
</b>
</td>

</tr>
</table>

</td>
</tr>
</table>

<table height="16" width="16" border="0" cellspacing="0" cellpadding="0">　　　※ココは余白なので削除してもＯＫです。
<tr>　　　　　　　　　　　　　　　　　　　　　　　　　　　
<td>
</td>
</tr>
</table>

<table width="80%" border="0" cellspacing="0" cellpadding="0">　　　※ココから次の同じ色の所までが1パターンです。
<tr valign="top" align="center">　　　　　　　　　　　　　　　　　　　　　　　　　　　　増やしたり減らしたりする時は目安にして下さい。

<td width="25%">
<table width="100%" border="0" cellspacing="6" cellpadding="0">　　　※ココは％を変えて個数を変更出来ます。
<tr>
<td align="center">
★★★ ここにアフィリエイト用の画像のソースを入れる ★★★
</td>
</tr>

<tr>
<td>
<font size="-1">
★★★ ここにアフィリエイト用のテキストリンクのソースを入れる ★★★
<br>
★★★ ここに紹介文を入れる ★★★
<br>
</font>
</td>
</tr>

</table>
</td>

<td width="25%">
<table width="100%" border="0" cellspacing="6" cellpadding="0">

<tr>
<td align="center">
★★★ ここにアフィリエイト用の画像のソースを入れる ★★★
</td>
</tr>

<tr>
<td>
<font size="-1">
★★★ ここにアフィリエイト用のテキストリンクのソースを入れる ★★★
<br>
★★★ ここに紹介文を入れる ★★★
<br>
</font>
</td>
</tr>

</table>
</td>

<td width="25%">
<table width="100%" border="0" cellspacing="6" cellpadding="0">

<tr>
<td align="center">
★★★ ここにアフィリエイト用の画像のソースを入れる ★★★
</td>
</tr>

<tr>
<td>
<font size="-1">
★★★ ここにアフィリエイト用のテキストリンクのソースを入れる ★★★
<br>
★★★ ここに紹介文を入れる ★★★
<br>
</font>
</td>
</tr>

</table>
</td>

<td width="25%">
<table width="100%" border="0" cellspacing="6" cellpadding="0">

<tr>
<td align="center">
★★★ ここにアフィリエイト用の画像のソースを入れる ★★★
</td>
</tr>

<tr>
<td>
<font size="-1">
★★★ ここにアフィリエイト用のテキストリンクのソースを入れる ★★★
<br>
★★★ ここに紹介文を入れる ★★★
<br>
</font>
</td>
</tr>

</table>
</td>

</tr>
</table>

<table width="80%" border="0" cellspacing="0" cellpadding="0">
<tr valign="top" align="center">

<td width="25%">
<table width="100%" border="0" cellspacing="6" cellpadding="0">

<tr>
<td align="center">
★★★ ここにアフィリエイト用の画像のソースを入れる ★★★
</td>
</tr>

<tr>
<td>
<font size="-1">
★★★ ここにアフィリエイト用のテキストリンクのソースを入れる ★★★
<br>
★★★ ここに紹介文を入れる ★★★
<br>
</font>
</td>
</tr>

</table>
</td>

<td width="25%">
<table width="100%" border="0" cellspacing="6" cellpadding="0">
<tr>
<td align="center">
★★★ ここにアフィリエイト用の画像のソースを入れる ★★★
</td>
</tr>

<tr>
<td>
<font size="-1">
★★★ ここにアフィリエイト用のテキストリンクのソースを入れる ★★★
<br>
★★★ ここに紹介文を入れる ★★★
<br>
</font>
</td>
</tr>

</table>
</td>

<td width="25%">
<table width="100%" border="0" cellspacing="6" cellpadding="0">

<tr>
<td align="center">
★★★ ここにアフィリエイト用の画像のソースを入れる ★★★
</td>
</tr>

<tr>
<td>
<font size="-1">
★★★ ここにアフィリエイト用のテキストリンクのソースを入れる ★★★
<br>
★★★ ここに紹介文を入れる ★★★
<br>
</font>
</td>
</tr>

</table>
</td>

<td width="25%">
<table width="100%" border="0" cellspacing="6" cellpadding="0">

<tr>
<td align="center">
★★★ ここにアフィリエイト用の画像のソースを入れる ★★★
</td>
</tr>

<tr>
<td>
<font size="-1">
★★★ ここにアフィリエイト用のテキストリンクのソースを入れる ★★★
<br>
★★★ ここに紹介文を入れる ★★★
<br>
</font>
</td>
</tr>

</table>
</td>

</tr>
</table>

</td>
</tr>
</table>